<script setup lang="ts">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import { getInfoApi } from '@/api/attachment'
import { getBrandListApi } from '@/api/brand'
import { CurdData } from '@/api/attachment/types'
import { Descriptions } from '@/components/Descriptions'
import useSchema from './components/hooks/useSchema'
import { useCrudSchemas, AllSchemas } from '@/hooks/web/useCrudSchemas'
import { useEnumeratePicker } from '@/utils'

const { push, go } = useRouter()

const { query } = useRoute()

const { t } = useI18n()

const currentRow = ref<Nullable<CurdData>>(null)

const getAttachmentInfo = async () => {
  const res = await getInfoApi(query.id as string)
  if (res) {
    currentRow.value = res.data
  }
}

getAttachmentInfo()

// 查询品牌数据
const brandList = ref([])
const getBrandList = async () => {
  const res = await getBrandListApi({})
  if (res) {
    brandList.value = res.data.list
  }
}

const allSchemas = ref<AllSchemas>({
  searchSchema: [], // 确保与接口匹配
  tableColumns: [], // 确保与接口匹配
  formSchema: [], // 确保与接口匹配
  detailSchema: [] // 确保与接口匹配
})

const fetchData = async () => {
  await getBrandList()

  const schemaConfig: any = {
    brandList
  }
  const { crudSchemas } = useSchema(schemaConfig)
  const { allSchemas: newSchemas } = useCrudSchemas(crudSchemas)

  // 合并新的数据，确保不改变原有数据的类型
  allSchemas.value = {
    detailSchema: newSchemas.detailSchema || []
  }
}
fetchData()
</script>

<template>
  <ContentDetailWrap
    :title="t('attachment.detail')"
    @back="push('/attachment/attachment-management')"
  >
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <Descriptions :schema="allSchemas.detailSchema" :data="currentRow || {}" />

    <!--   关联商品列表-->
    <el-table
      class="m-t-60px"
      v-if="currentRow?.product_accessories_linked_data.length"
      :data="currentRow.product_accessories_linked_data"
      highlight-current-row
      stripe
      border
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column :label="t('product.id')" prop="id" width="150" />
      <el-table-column :label="t('product.code')" prop="code" />
      <el-table-column :label="t('product.cname')" prop="cname" />
      <el-table-column :label="t('product.status')" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <ElTag v-if="row.status == 1" type="success">上架</ElTag>
          <ElTag v-else type="warning">下架</ElTag>
        </template>
      </el-table-column>
    </el-table>
  </ContentDetailWrap>
</template>

<style lang="less">
@import url('@/styles/global.less');
</style>
